<template>
  <div class="logLogin">
    <pageCard :title-name="'登录日志'" :type="'pageTitle'">
      <div>
        <div class="topText">登录账号：</div>
        <el-input
          v-model="search.operatorAccount"
          placeholder="请输入"
          class="searchInput"
          @keyup.enter.native="searchClick"
        />
        <div class="topText">登录时间：</div>
        <el-date-picker
          v-model="search.chooseDate"
          type="daterange"
          align="right"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="dateRange"
          :picker-options="pickerOptions"
        />
        <el-button type="primary" class="topBtn" icon="el-icon-search" @click="searchClick">搜索</el-button>
      </div>
      <myTable
        ref="myTable"
        style="height: 100%"
        :row-key="'logId'"
        :table-label="tableLabel"
        :table-data="tableData"
        :table-total-size="tableTotalSize"
        :search-data="searchData"
        @getTableData="getTableData"
        @handleSelectionChange="handleSelectionChange"
        @rowClickChange="rowClickChange"
      />
      <pagination
        :table-total-size="tableTotalSize"
        :search-data="searchData"
        @getTableData="$refs.myTable.getTableData()"
      />
    </pageCard>
    <!-- <iframe src="http://localhost:8080/log/logPage" frameborder="0" style="height: 100%;width: 100%;" /> -->
  </div>
</template>

<script>
import { getLoginLog } from '@/api/system-management'
import pageCard from '@/components/page/pageCard'
import myTable from '@/components/Table/index'
import pagination from '@/components/Table/pagination'
import defaultSettings from '@/settings'
import { generateUUID, postMessage, receivedMessage } from '@/utils/index'
export default {
  name: 'LogLogin',
  components: {
    pageCard,
    myTable,
    pagination
  },
  data() {
    return {
      search: {
        operatorAccount: '',
        chooseDate: null
      },
      searchData: {
        pageSize: 15,
        currentPage: 1,
        sort: {},
        params: {
          logType: 'loginLogout'
        }
      },
      // table需要的数据
      tableData: [],
      tableLabel: [
        {
          prop: 'logId',
          label: '日志编号',
          width: 270,
          showOverflowTooltip: true
        },
        {
          prop: 'operatorAccount',
          label: '用户账号',
          width: 270,
          showOverflowTooltip: true
        },
        {
          prop: 'operatorName',
          label: '用户姓名',
          width: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'logInfo',
          label: '操作信息',
          showOverflowTooltip: true
        },
        {
          prop: 'remoteAddress',
          label: '登录地址',
          width: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'createTime',
          label: '操作时间',
          width: 270,
          showOverflowTooltip: true
        },
        {
          prop: 'browserName',
          label: '浏览器',
          width: 200,
          showOverflowTooltip: true
        }
      ],
      tableTotalSize: null,
      multipleSelection: [],
      currentRow: {},
      // 日期选择配置
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      callbackFun: null,
      getLoginLogRequestId: generateUUID()
    }
  },
  mounted() {
    receivedMessage(this.dataHandle)
  },
  methods: {
    dataHandle(result) {
      let self = this
      let e = defaultSettings.isWPF ? result : { data: JSON.parse(result) }
      if (e.data.webInfo.requestId === self.getLoginLogRequestId) {
        let res = e.data.response
        self.tableData = res.data.data
        self.tableTotalSize = res.data.total_count
        self.callbackFun(self.tableData)
      }
    },
    // 获取tableData
    getTableData(cab) {
      if (defaultSettings.isWPF || defaultSettings.isCEF) {
        this.callbackFun = cab
        this.getLoginLogRequestId = generateUUID()
        let message = {
          RequestUrl: process.env.VUE_APP_URL + '/vue/loginLog/load',
          RequestMethod: 'POST',
          Headers: {
            contentType: 'application/json'
          },
          QueryParameter: {},
          RequestBody: this.searchData,
          WebInfo: {
            requestId: this.getLoginLogRequestId
          }
        }
        postMessage(message)
      } else {
        getLoginLog(this.searchData).then((res) => {
          this.tableData = res.data.data
          this.tableTotalSize = res.data.total_count
          cab(this.tableData)
        })
      }
    },
    // 搜索
    searchClick() {
      this.searchData.currentPage = 1
      this.searchData.params['operatorAccount'] = this.search.operatorAccount
      if (this.search.chooseDate) {
        this.searchData.params['startDate'] = this.search.chooseDate[0]
        this.searchData.params['endDate'] = this.search.chooseDate[1]
      } else {
        this.searchData.params['startDate'] = null
        this.searchData.params['endDate'] = null
      }
      this.$refs.myTable.getTableData()
    },
    // 复选框回调函数
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击行回调函数
    rowClickChange(val) {
      this.currentRow = val
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/pageTableTop.scss';
.logLogin {
  height: 99%;
}
</style>
